import React, { PureComponent } from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Header from '../../components/Header/Header';
import { $pre } from '../../http/http';
import { actions, getGood } from '../../store/modules/detail';
import "./Detail.less"

class Detail extends PureComponent {
  componentDidMount(){
    let {detail:{reqGood}} = this.props
    let {id} = this.props.match.params;
    reqGood(id)
  }
  render() {
    let {good,detail:{addShop}} = this.props;
    return (
      <div className='detail'>
        <Header title="商品详情" back></Header>
        <img src={$pre+good.img} alt="" />
        <h2>{good.goodsname}</h2>
        <div className='price'>原价：<del>￥{good.market_price}</del></div>
        <div className='price'>现价：￥{good.price}</div>
        <div className="footer">
          <span className='toshop' onClick={()=>this.props.history.push("/index/shop")}>前往购物车</span>
          <span className='addshop' onClick={()=>addShop()}>加入购物车</span>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state=>{
  return  {
    good:getGood(state)
  }
}
const mapDispatchToProps = dispatch=>{
  return {
    detail:bindActionCreators(actions,dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Detail)